<template>
	<view class="main">
		<!-- 滚动 -->
		<view class="notice-bar"><u-notice-bar :text="text" direction="column"></u-notice-bar></view>
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="false" :interval="3000" :duration="500" @change="swiperChange">
				<swiper-item v-for="(item, index) in groupedList" :key="index">
					<view class="swiper-item uni-bg-red"><image mode="aspectFit" class="img" :src="item.image" :alt="item.title"></image></view>
				</swiper-item>
			</swiper>
			<!-- 轮播图标记点 -->
			<view class="swipers-dots">
				<view v-for="(item, i) in groupedList" :key="i"><view :class="current === i ? 'swiper-dot-active' : ''" class="swiper-dot"></view></view>
			</view>
		</view>

		<!-- 最新消息速递 升学咨询 -->
		<view class="recent-consult">
			<view class="recent" @click="recentClick"><image mode="aspectFit" class="img" src="../../../static/utils_img/jinqihuodong.png" alt="最新消息速递" /></view>
			<!-- /**
			   * target：在哪个目标上发生跳转，默认当前小程序，有效值: self（当前小程序），miniProgram（其它小程序）
			   * open-type：跳转方式 “avigate    对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能”
			   * app-id：跳转到的小程序app-id
			   * version：要打开的小程序版本，有效值: develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效，如果当前小程序是正式版，则打开的小程序必定是正式版
			   */ -->
			<button class="consult" open-type="contact"><image mode="aspectFit" class="img" src="../../../static/utils_img/shengxuezixun.png" alt="升学咨询" /></button>
		</view>

		<!-- 打卡 -->
		<view class="Clock" @click="Clock">
			<view class="imgs"><image mode="aspectFit" class="img" :src="poster.dayImg" alt="打卡"></image></view>
			<view class="block">
				<view class="left">
					<view class="title">每日打卡</view>
					<view class="text">计划成长</view>
				</view>
				<view class="right">
					<view class="icon"><image mode="aspectFit" class="img" src="../../../static/utils_img/jiantou.png" alt="打卡"></image></view>
					<view class="time">
						<view class="day">{{ time.day }}</view>
						<view class="month-year">
							<view class="month">{{ time.month }}月</view>
							<view class="year">{{ time.year }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 公众号文章封面 -->
		<view class="officials">
			<view v-for="(item, index) in bookList" :key="index" class="official" @click="clickPoster(item)">
				<image mode="scaleToFill" class="official-img" :src="item.image" alt="海报图片"></image>
			</view>
		</view>
	</view>
</template>

<script>
import {
	gundongkechengbiao, // 获取课程表滚动列表 滚动通知
	banner, // 获取轮播图列表
	teacher, // 获取老师列表
	configImg, // 海报 key 图片url
	gzhimg // 公众号文章封面
} from '@/common/api.js';
export default {
	data() {
		return {
			text: [],
			current: 0,
			groupedList: [1, 2, 3],
			poster: {
				// 海报图片
				configImgData: null,
				// 海报链接
				configUrlData:null,
				// 每日打卡图片
				dayImg: null
			},
			time: {
				day: '',
				month: '',
				year: ''
			},
			// 公众号图片
			bookList: []
		};
	},
	methods: {
		// 点击打卡
		Clock() {
			uni.navigateTo({
				url: '/pages/index/src/signin/signin'
			});
		},
		swiperChange(e) {
			this.current = e.detail.current;
		},
		// 点击海报跳转
		clickPoster(item) {
			uni.setStorageSync('posterUrl', item.url);
			uni.navigateTo({
				url: '/pages/index/src/click-poster/click-poster' 
			});
		},
		recentClick() {
			uni.navigateTo({
				url: '/pages/index/src/recent/recent'
			});

		},
		async api() {
			// 获取课程表滚动列表
			let { data: gundongkechengbiaoData } = await gundongkechengbiao();
			gundongkechengbiaoData.forEach(e => {
				this.text.push(e.title);
			});
			// 获取轮播图列表
			let { data: bannerData } = await banner();
			this.groupedList = bannerData;
			// 获取海报 图片
			let { data: configImgData } = await gzhimg();
			let dayImg = await configImg({ params: { key: 'mrdkimgurl' } });
			console.log('gzhimg', configImgData);
			this.bookList = configImgData;
			this.poster.dayImg = 'https://jy.plasmidedu.cn/' + dayImg;
		}
	},
	async mounted() {
		await this.api();
		// 获取现在的时间
		this.time.year = uni.$u.timeFormat(Date.now(), 'yyyy');
		this.time.month = uni.$u.timeFormat(Date.now(), 'mm');
		this.time.day = uni.$u.timeFormat(Date.now(), 'dd');
	}
};
</script>

<style lang="scss" scoped>
// 主要内容
.main {
	// 头
	.mian-header {
		// height: 300rpx;
		display: flex;

		.img {
			width: 90rpx;
			height: 90rpx;
			margin: 60rpx 0 60rpx 60rpx;
		}
		.text-header {
			margin: 60rpx;
		}
	}
	// 滚动消息
	.notice-bar {
		// margin-bottom: 28rpx;
	}
	// 轮播图
	.swiper {
		height: 250rpx;
		padding: 0rpx 28rpx 28rpx 28rpx;
		.swiper-item {
			background-color: rbga(0, 0, 0, 0);
			width: 672rpx;
			height: 277rpx;
			border-radius: 28rpx;
			display: flex;
			justify-content: center;
			.img {
				width: 672rpx;
				height: 277rpx;
			}
		}
	}
	.swipers-dots {
		// margin-bottom: 22rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.swiper-dot {
			background-color: #bababd;
			width: 2 * 56rpx;
			height: 18rpx;
			border-radius: 8rpx;
			margin-right: 28rpx;
		}

		.swiper-dot-active {
			background-color: #c9dfe6;
			overflow: hidden;
		}
	}

	// 最新消息速递 升学咨询
	.recent-consult {
		display: flex;
		justify-content: space-around;
		// margin-right: 28rpx;
		.recent {
			border-radius: 28rpx;
		}
		.consult {
			background-color: rgba(0, 0, 0, 0);
			border-radius: 28rpx;
			padding: 0;
		}
		.consult::after {
			border: none;
		}
		.img {
			width: 370rpx;
			height: 250rpx;
		}
	}
	.officials {
		display: flex;
		flex-direction: column;

		.official {
			flex: 1;
			display: flex;
			margin: 28rpx 28rpx 0 28rpx;
			border-radius: 28rpx;
			.official-img {
				flex: 1;
				height: 277rpx;
			}
		}
	}
	// 宣传长图
	.propaganda {
		margin: 28rpx;
		padding-bottom: 144rpx;
	}
}
.Clock {
	display: flex;
	justify-content: center;
	width: 750rpx;
	height: 160rpx;
	position: relative;
	.imgs {
		position: absolute;
		display: flex;
		justify-content: center;
		// background-color: aquamarine;
		// margin-left: 28rpx;
		width: 694rpx;
		height: 160rpx;
		.img {
			width: 694rpx;
			height: 160rpx;
		}
	}
	.block {
		z-index: 1;
		width: 694rpx;
		height: 160rpx;
		color: #3F3D39;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 28rpx;
		.left {
			.title {
				font-size: 42rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				margin-bottom: 14rpx;
			}d
			.text {
				font-size: 23rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
			}
		}
		.right {
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			.icon {
				padding-left: 120rpx;

				.img {
					width: 50rpx;
					height: 50rpx;
				}
			}
			.time {
				display: flex;
				align-items: center;
				.day {
					padding-right: 10rpx;
				}
				.month-year {
					padding-left: 10rpx;
					border-left: 6rpx solid #3F3D39;
				}
			}
		}
	}
}
</style>
